<template>
    <div>
        <van-row class="row1">
			<van-col span="24">歌手列表</van-col>
		</van-row>
        
        <!-- <van-row class="rowtest">
			<van-col span="6">
                <van-image
                round
                width="50px"
                height="50px"
                src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
                /></van-col>
			<van-col span="6">
                <van-image
                round
                width="50px"
                height="50px"
                src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
                /></van-col>
			<van-col span="6">
                <van-image
                round
                width="50px"
                height="50px"
                src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
                /></van-col>
			<van-col span="6">
                <van-image
                round
                width="50px"
                height="50px"
                src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
                /></van-col>
		</van-row> -->
        
        <div class="pic">
            <div v-for="item,index in artistlist" :key="index" @click="getid(index)">
                <van-image
                    round
                    width="100px"
                    height="100px"
                    :src="item.img1v1Url"
                />
                <br>
                <span>{{item.name}}</span>
             </div>
        </div>

    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import {RequestArtistList} from "@/api/search"
import { useuidStore } from '@/stores/user'
import router from '@/router';

const userstore = useuidStore()
let fn1 = ()=>{
  console.log("artistid>>>",userstore.artistid);
}
fn1()
let fn2 = ()=>{
//   userstore.saveId()
}


let artistlist = ref([])
let getartistlist = async ()=>{
    let res = await RequestArtistList()
    // 歌手列表
    // console.log(res.data.artists)
    artistlist.value = res.data.artists
    console.log(artistlist.value.length);
    
}
getartistlist()
// 点头像获取id 跳转
let getid = (index)=>{
    let idlist =  artistlist.value.map(item=>{
        return item.id
    })
    // console.log(idlist);
    console.log(idlist[index]);

    // 持久化存储歌手id
    userstore.artistid = idlist[index]

    // 跳转歌手个歌单页
    router.push({path:'/artistsongs'})
}
</script>

<style lang="scss" scoped>
.row1{
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
}
.rowtest{
    text-align: center;
}

.pic{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    text-align: center;
    width: 100%;
    div{
        width: 33%;
    }
}
</style>